import React from "react";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.css";
import top from "./images/top.jpg";
import reward from "./images/jiang.jpg";
import wx from "./images/erweima.jpg";
import { NavBar, Space } from 'antd-mobile'
import { ShareO } from '@react-vant/icons';


const Index: React.FC = () => {
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <ShareO />
      </Space>
    </div>
  )
  const navigator = useNavigate()

  const back = () => {
    navigator('/case')
  }
  return (
    <div>
      <div className={styles.navbar}>
        <NavBar right={right} onBack={back} >
          案例活动
        </NavBar>
      </div>

      <div className={styles.top}>
        <img src={top} alt="" />
      </div>
      <div className={styles.help}>
        <div className={styles.write}>
          同病相怜，同忧相救。只有经历过病痛的人，才能深切的感受到他人的痛苦。妙手医生诚邀您分享治疗
          经验，完整记录患病<b>[确诊过程]</b>、<b>[治疗过程]</b>、
          <b>[心得体会]</b>等，和我们一起帮助更多的人科学治疗、少走弯路！
          期待您的参与！
        </div>
      </div>

      <div className={styles.reward}>
        <img src={reward} alt="" />
        <div className={styles.treaty}>
          <input type="checkbox" name="" />
          参与即代表您已经同意妙手医生《作者协议》
        </div>
      </div>

      <div className={styles.wchat}>
        <div className={styles.img}>
          <img src={wx} alt="" />
        </div>
        <div className={styles.tit}>
          <h3>
            微信号:<li>jzan2021</li>
          </h3>
          <p>添加微信好友，咨询活动详情</p>
          <li className="btn">复制微信号</li>
        </div>
      </div>

      <div className={styles.box}>
        <h2>
          <div className={styles.title}>素材要求</div>
        </h2>
        <div className={styles.content}>
          <p>
            完整记录病患和治疗过程，包含要点[疾病类型]、[主要症状]、[治疗方法]、
            [治疗周期]、[心得体会]等
          </p>
        </div>
      </div>

      <div className={styles.box}>
        <h2>
          <div className={styles.title}>活动时间</div>
        </h2>
        <div className={styles.content}>
          <p
            style={{
              textAlign: "center",
            }}
          >
            即日起-2022年4月30日
          </p>
        </div>
      </div>
      <div className={styles.box}>
        <h2>
          <div className={styles.title}>分享奖励</div>
        </h2>
        <div className={styles.content}>
          <p>
            将活动分享好友，有机会得
            <span
              style={{
                color: "#3b66f1;",
              }}
            >
              现金红包
            </span>
            奖励，详情添加微信
            <span
              style={{
                color: "#3b66f1;",
              }}
            >
              hzan2021
            </span>
            咨询
          </p>
        </div>
      </div>
      <div className={styles.box}>
        <h2>
          <div className={styles.title}>规则说明</div>
        </h2>
        <div className={styles.content}>
          <p>
            为营造专业、文明和可信赖的患者交流社区，用户参与活动前应详细阅读活动《活动规则》及《做这些以》，
            我们将《活动规则》中的中耀信息摘录如下：
          </p>
          <p>
            1、参与要求：素材内容必须是本人或直系家属真是的治疗经验，具备真实性、原创性，不得抄袭、作假。
          </p>
          <p>
            2、素材的内容应至少符合“参与要求”，经过专业的审核团队审核通过并采用，且作者确认上转到妙手医生App后，
            妙手医生会发布相应的奖励。
          </p>
          <p>3、已发布到妙手医生App上的作品未经妙手医生同意不得删除、下架。</p>
          <p>
            4、不得采用任何不正当手段或舞弊行为参与本次活动。妙手医生有权限根据用户的规范行为实施相应
            管控、处罚措施
          </p>
          <p>
            5、参与本次活动前，请用户详细阅读活动规则及《作者协议》相关条款。凡参与本次活动，规则为用户已阅读、
            理解并同意《活动规则》及《作者协议》全部内容
          </p>
          <div className={styles.tp}>
            分享好友：康复接力，让你的善意帮助更多病友电量康复希望！
          </div>
        </div>
      </div>

      <div className={styles.footer}>
        <h3>
          <li className={styles.logo}>妙手</li>
          <li className={styles.ti}>妙手医生</li>
        </h3>
        <p>— 真实患者就医治疗经历，让您浔一问药少走弯路 —</p>
      </div>
    </div>
  );
};

export default Index;
